.avatar {
  position: relative;
  box-sizing: border-box;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;

  .status {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 30%;
    height: 30%;
    background-color: var(--color-online);
    border-radius: 50%;
  }

  img {
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
  }
}

.downline {
  filter: grayscale(1);
}

.avatar-circle {
  border-radius: 50%;

  img {
    border-radius: 50%;
  }
}

.avatar-square {
  border-radius: 8px;

  img {
    overflow: hidden;
    border-radius: 8px;
  }
}
